<template>

  <div class="exam-detail">

    <div class="inner">

      <div class="title2">
        <div class="el-col-5">姓名：{{examData.userName}}</div>
        <div class="el-col-6">手机号：{{examData.userPhone}}</div>
        <div class="el-col-6">开始时间：{{examData.examStartDate}}</div>
        <div>结束时间：{{examData.examEndDate}}</div>
      </div>

      <div class="title">
        <span>{{examData.examName}}(满分：{{examData.examTotal}})</span><span :hidden="displayTitleFlag">；得分：{{examData.scoreTotal}}</span>
      </div>

      <!--=================================单选题 开始=================================== -->
      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            单选题
          </div>
          <div class="item" v-for="(i, index) in examData.oneSelects" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18" >{{ i.title }}</div>
              <div  style="text-align: center">
                <span>{{i.grade}} 分</span>
                <span :hidden="displayTitleFlag">；得分: {{i.score}}</span>
              </div>
            </div>
              <el-radio-group
                v-model="choiseList[index]"
                class="option">

                <el-radio
                  :label="options"
                  v-for="(options, indx) in i.list"
                  v-bind:key="indx"
                  v-bind:aria-readonly="true"
                >{{ options.optionDef + "、" + options.optionText }}
                </el-radio>

              </el-radio-group>

            <div class="resultAn">
              <span> 答案：{{i.answer}} </span> <span :hidden="displayTitleFlag">；结果：{{i.content}}</span>
            </div>

          </div>
        </div>
      </div>



      <!--=================================多选题 开始=================================== -->
      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            多选题
          </div>
          <div class="item" v-for="(i, index) in examData.manySelects" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div  style="text-align: center">
                <span>{{i.grade}} 分</span>
                <span :hidden="displayTitleFlag">；得分: {{i.score}}</span>
              </div>
            </div>

            <el-checkbox-group
              v-model="choiseManyList"
              class="option"
            >
              <el-checkbox
                :label="options"
                v-for="(options, indx) in i.list"
                v-bind:key="indx"
              >{{ options.optionDef + "、" + options.optionText }}
              </el-checkbox>

              </el-checkbox-group>

            <div class="resultAn">
              <span> 答案：{{i.answer}} </span> <span :hidden="displayTitleFlag">；结果：{{i.content}}</span>
            </div>

          </div>
        </div>
      </div>

      <!--=================================多选题 结束=================================== -->

      <!--=================================判断题 开始=================================== -->

      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            判断题
          </div>
          <div class="item" v-for="(i, index) in examData.judges" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div style="text-align: center">
                <span>{{i.grade}} 分</span>
                <span :hidden="displayTitleFlag">；得分: {{i.score}}</span>
              </div>
            </div>
            <el-radio-group
              v-model="choiseJudgeList"
              class="option"
            >
              <el-radio
                :label="options"
                v-for="(options, indx) in i.list"
                v-bind:key="indx"
              >{{ options.optionDef + "、" + options.optionText }}
              </el-radio>

            </el-radio-group>

            <div class="resultAn">
              <span> 答案：{{i.answer}} </span> <span :hidden="displayTitleFlag">；结果：{{i.content}}</span>
            </div>
          </div>
        </div>
      </div>


      <!--=================================判断题 结束=================================== -->

      <!--=================================填空题 开始=================================== -->

      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            填空题
          </div>
          <div class="item" v-for="(i, index) in examData.completions" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div style="text-align: center">
                <span>{{i.grade}} 分</span>
                <span :hidden="displayTitleFlag">
                  ；得分:
                  <input v-if="inputFlag" v-model="i.score" v-bind:aria-disabled="true" type="number" style="width: 50px"/>
                  <span v-else>{{i.score}}</span>
                </span>
              </div>
            </div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="i.context" style="margin-top: 20px">
            </el-input>

            <div class="resultAn">
              <span> 答案：{{i.answer}} </span>
            </div>

          </div>
        </div>

      </div>
      <!--=================================填空题 结束=================================== -->

      <!--=================================简答题 开始=================================== -->

      <div class="cont">
        <div class="cont-left">
          <div class="subhead">
            简答题
          </div>
          <div class="item" v-for="(i, index) in examData.shortAnswers" v-bind:key="index">
            <div class="subject">
              <div class="el-col-1">{{ index + 1 }}、</div>
              <div class="el-col-18">{{ i.title }}</div>
              <div style="text-align: center">
                <span>{{i.grade}} 分</span>
                <span :hidden="displayTitleFlag">
                  ；得分:
                  <input v-if="inputFlag" v-model="i.score" type="number" style="width: 50px"/>
                  <span v-else>{{i.score}}</span>
                </span>
              </div>
            </div>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="i.context" style="margin-top: 20px">
            </el-input>

            <div class="resultAn">
              <span> 答案：{{i.answer}} </span>
            </div>

          </div>
        </div>

      </div>

      <!--=================================简答题 结束=================================== -->

      <div>
        <el-button type="success" @click="updateResult" :hidden="btnDisableFlag"> 打分 </el-button>
      </div>

      <!--<div>-->
        <!--<el-button type="primary" @click="pr"> 打印 </el-button>-->
      <!--</div>-->

    </div>

  </div>


</template>

<script>

  import* as examUserService from '@/api/examUser';

  export default {
    data() {
      return {
        id: this.$route.query.id,

        searchAddObj: {},
        searchUpdObj: {},

        // data
        examData: {
          oneSelects: {
          },
        },

        // 选择的数据
        choiseList: [],
        choiseManyList: [],
        choiseJudgeList: [],
        choiseCompletionList: [],
        choiseshortAnswerList: [],


        btnDisableFlag: true,
        displayTitleFlag: false,

        inputFlag: true,


      };
    },

    created(){
      this.getListById();
    },

    mounted() {

    },

    methods: {
      pr(){
         console.log(this.examData.completions);
         console.log(this.examData.shortAnswers);
      },

      getListById(){
        examUserService.detailExamUser(this.id).then(res =>{
          debugger;
          this.examData = res.data;
          if (this.examData.status === 'noExam'){// 未开始考试，考试结果隐藏
            this.displayTitleFlag=true;
            this.btnDisableFlag=true;
          }

          if (this.examData.status === 'endExam'){
            this.displayTitleFlag=false;
            this.btnDisableFlag=false;
          }

          if (this.examData.status === 'endScore'){
            this.displayTitleFlag=false;
            this.btnDisableFlag=false;
            this.inputFlag=false;
          }


        });
      },

      updateResult(){
        const query = {};
        query.ceeExamUserId = this.examData.id;
        query.completions = this.examData.completions;
        query.shortAnswers = this.examData.shortAnswers;

        this.$confirm('此操作将保存考试信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examUserService.updateExamUser(query)
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: '保存考试信息成功!'
              });

              //本页面打开列表
              this.getListById();
            });
        });
      },

    }
  };

</script>

<style scoped lang="scss">
  .exam-detail {
    background: #fafafa;
    padding: 20px 0;
    box-sizing: border-box;
    .inner {
      width: 1100px;
      margin: 0 auto;

      .title {
        margin-left: 350px;
        margin-bottom: 40px;
        font-size: 24px;
        a {
          color: #333;
          margin-right: 5px;
        }
      }

      .title2 {
        /*margin-left: 100px;*/
        margin-bottom: 40px;
        font-size: 24px;
        a {
          color: #333;
          margin-right: 5px;
        }
      }

      .cont {
        display: flex;
        justify-content: space-between;
        .cont-left {
          width: 1100px;
          background: #fff;
          /*min-height: 600px;*/

          .subhead {
            width: 100%;
            height: 47px;
            background: #effaff;
            line-height: 47px;
            color: #0076ff;
            padding-left: 26px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: bold;
          }

          .item {
            padding: 15px 26px;
            box-sizing: border-box;

            .subject {
              margin-bottom: 20px;
            }

            .option {
              .el-radio {
                margin-top: 20px;
                margin-bottom: 15px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
              }

              .el-radio__input {
                display: block;
              }

              .el-radio__label {
                display: block;
                white-space: normal;
                width: 600px;
                line-height: 15px;
              }

              .el-checkbox {
                margin-top: 20px;
                margin-bottom: 15px;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
              }

              .el-checkbox__input {
                margin-top: 20px;
                display: block;
              }

              .el-checkbox__label {
                margin-top: 20px;
                display: block;
                white-space: normal;
                width: 600px;
                line-height: 15px;
              }
            }
          }
        }
      }
    }
  }

  ul {
    width: 270px;
    // padding: 10px;
    // box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    background: red;
    li {
      width: 35px;
      height: 35px;
      border-radius: 6px;
      margin: 5px;
      &.green-bg {
        background: green;
      }

      &.red-bg {
        background: red;
      }

      &.gray-bg {
        background: gray;
      }
    }
  }

  .objhead {
    width: 100%;
    /*height: 47px;*/
    background: #effaff;
    line-height: 47px;
    color: #0076ff;
    /*padding-left: 26px;*/
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom:1px solid #000;

  }


  ul li[data-v-5c2a0797] {
    width: 100%;
  }

  .resultAn {
    margin-top: 20px;
  }
</style>



